<template>
    <div v-transfer-dom>
        <popup v-model="showProp"
               width="100%"
               @on-hide="propHide">
            <header>
                <span @click="propHide">取消</span>
                <span @click="confirm">确定</span>
            </header>
            <div class="content-wrap">
                <noData v-if="theModel == 0"></noData>
                <!-- <div v-for="(item,index) in theModel"
                     :key="index"
                     v-else>
                    <div class="content"
                         @click="openChild(item)">
                        <span class="name">
                            {{item.DeptName}}
                        </span>
                        <x-icon type="ios-arrow-down"
                                size="30"
                                v-if="item.open"></x-icon>
                        <x-icon type="ios-arrow-right"
                                size="30"
                                v-if="!item.open"></x-icon>
                    </div>
                    <ul v-show="item.open"
                        class="user-list">
                        <li v-for="(childItem,i) in item.Children"
                            :key="i"
                            @click="selectedFn(childItem)">
                            <label>{{childItem.DeptName}}</label>
                            <icon v-if="childItem.checked"
                                  type="success-no-circle"></icon>
                        </li>
                    </ul>
                </div> -->
                <list :theModel="theModel"
                      :selectedFn="selectedFn"
                      :openChild="openChild"
                      v-if="theModelShow"></list>
            </div>
        </popup>
    </div>
</template>
<script>
import { TransferDom, Popup, Icon } from 'vux'
import list from './list'
export default {
    name: 'hideDescribeProp',
    data () {
        return {
            showProp: false,
            selectedDeptNameArr: [],
            selectedDeptIdArr: [],
            theModel: [],
            userInfo: '',
            DeptDetail: '',
            theModelShow: false
        }
    },
    components: {
        Popup,
        Icon,
        list
    },
    directives: {
        TransferDom
    },
    created () {
        this.userInfo = JSON.parse(localStorage.userInfo)
        if (this.id) {
            this.getData()
        }
    },
    props: {
        selectHideDesPerson: {
            type: Function
        },
        hideDescribePropShow: {
            type: Boolean,
            default: false
        },
        id: {
        }
    },
    watch: {
        hideDescribePropShow (newVal) {
            this.showProp = newVal
        },
        id (newVal) {
            if (newVal) {
                this.getData()
            }
        }
    },
    methods: {
        getData () {
            let params = {
                'allowPaging': true,
                'business': 'FetchHiddenDangerStandards',
                'data': {
                    'ProjectId': this.userInfo.deptid,
                    'id': this.id
                },
                'pageIndex': 0,
                'pageSize': 999,
                'tokenId': this.userInfo.tokenId,
                'userId': this.userInfo.userid
            }
            this.$axiosAjax.getConfigJson(params).then((res) => {
                if (res.data.code === 0) {
                    this.initData = res.data.data
                    let childData = []
                    this.theModel = []
                    res.data.data.forEach(item => {
                        if (item.type === 0) {
                            this.theModel.push(item)
                        } else {
                            childData.push(item)
                        }
                    })
                    childData.forEach(item => {
                        this.dataRecursion(this.theModel, item)
                    })
                    for (let i = 0; i < this.theModel.length; i++) {
                        for (let j = 0; j < this.theModel.length; j++) {
                            if (this.theModel[i].ParentId === this.theModel[j].DeptId) {
                                if (!(this.theModel[j].Children instanceof Array)) {
                                    this.theModel[j].Children = []
                                }
                                this.theModel[j].Children.push(this.theModel.splice(i, 1))
                                // this.theModel[j].Children.push(this.theModel[i])
                                i--
                                break
                            }
                        }
                    }
                    this.theModelShow = true
                }
            }).catch(() => {

            })
        },
        dataRecursion (dataArr, item) {
            for (let i = 0; i < dataArr.length; i++) {
                if (dataArr[i].DeptId === item.ParentId) {
                    if (!(dataArr[i].Children instanceof Array)) {
                        dataArr[i].Children = []
                    }
                    dataArr[i].Children.push(item)
                    return false
                }
                if (dataArr[i].Children && dataArr[i].Children.length > 0) {
                    this.dataRecursion(dataArr[i].Children, item)
                }
            }
        },
        openChild (item) {
            this.$set(item, 'open', !item.open)
            this.theModelShow = false
            this.$nextTick(() => {
                this.theModelShow = true
            })
        },
        propHide () {
            this.$parent.hideDescribePropShow = false
        },
        selectedFn (item) {
            this.$set(item, 'checked', !item.checked)
            if (item.checked) {
                this.selectedDeptNameArr.push(item.DeptName)
                this.selectedDeptIdArr.push(item.DeptId)
            } else {
                let index = this.selectedDeptNameArr.indexOf(item.DeptName)
                this.selectedDeptNameArr.splice(index, 1)
                this.selectedDeptIdArr.splice(index, 1)
            }
            this.theModelShow = false
            this.$nextTick(() => {
                this.theModelShow = true
            })
        },
        confirm () {
            this.selectHideDesPerson(this.selectedDeptNameArr.join(','), this.selectedDeptIdArr.join(','))
        }
    }
}
</script>
<style scoped>
header {
    display: flex;
    justify-content: space-between;
    line-height: 40px;
    padding: 0 20px;
    background: rgba(0, 0, 0, 0.1);
}
header span:first-child {
    font-size: 14px;
    color: #333;
}
header span:last-child {
    font-size: 14px;
    color: cornflowerblue;
}
.content-wrap {
    height: calc(100% - 40px);
    overflow-y: scroll;
}
.content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
}
.name {
    line-height: 24px;
    max-width: 320px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 14px;
    color: #333;
}
.user-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 20px;
    color: #999;
    font-size: 14px;
    padding: 10px 10px 10px 0;
    margin-left: 30px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.user-list li label {
    width: 300px;
    /* overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; */
}
.user-list ul li:last-child {
    padding-bottom: 0;
}
</style>
